﻿@{
    ViewBag.Title = "数据日志";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="row">
    <div class="col-md-12">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">数据日志列表</h3>
                <div class="tab-date" style="right: 270px;">
                    <a id="ctl00_cphMain_hlDay" href="Report.aspx?type=0&amp;active=58,61"><span class="active">近一个月</span></a>
                    <a id="ctl00_cphMain_hlWeek" href="Report.aspx?type=1&amp;active=58,61"><span>近三个月</span></a>
                    <a id="ctl00_cphMain_hlMonth" href="Report.aspx?type=2&amp;active=58,61"><span>近一年</span></a>
                </div>
                <div class="box-tools">
                    <div class="input-group" style="width: 250px;">
                        <input type="text" class="form-control input-sm" placeholder="请输入名称进行模糊查询...">
                        <div class="input-group-btn">
                            <a class="btn btn-sm btn-default"><i class="fa fa-search"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-body no-padding">
                <div class="mailbox-controls">
                    <div class="btn-group" id="partial_button_toolbar">
                        @{ Html.RenderPartial("~/Areas/Common/Views/Shared/_PartialButton.cshtml"); }
                    </div>
                    <a data-toggle="tooltip" title="刷新" class="btn btn-default btn-sm"><i class="fa fa-refresh">刷新</i></a>
                </div>
                <div class="mailbox-jqgrid">
                    <table id="list"></table>
                    <div id="pager"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="detailDiv" style="overflow: auto;display: none">
    <table class="edit-table">
        <tbody>
            <tr>
                <th>
                    登录名：
                </th>
                <td>
                    <label id="CreateUserCode" />
                </td>
            </tr>
            <tr>
                <th>
                    真实姓名：
                </th>
                <td>
                    <label id="CreateUserName" />
                </td>
            </tr>
            <tr>
                <th>
                    操作时间：
                </th>
                <td>
                    <label id="CreateTime" />
                </td>
            </tr>
            <tr>
                <th>
                    操作类型：
                </th>
                <td>
                    <label id="OperateTypeName" />
                </td>
            </tr>
            <tr>
                <th>
                    操作表名：
                </th>
                <td>
                    <label id="OperateTable" />
                </td>
            </tr>
            <tr>
                <th valign="top">
                    操作数据：
                </th>
                <td id="OperateData"></td>
            </tr>
        </tbody>
    </table>
</div>
<script type="text/javascript">
    var $grid,
        height;
    function initGird() {
        $grid = $("#list").jgridview(
        {
            loadonce: false,
            shrinkToFit: true,
            url: '/System/Log/GetPagingDataLog',
            colModel: [
                { name: "DataLogId", hidden: true },
                { label: "登录名", name: "CreateUserCode", width: 130, fixed: true },
                { label: "真实姓名", name: "CreateUserName", width: 130, fixed: true },
                { label: "操作时间", name: "CreateTime", align: "center", fixed: true, width: 130, formatoptions: { srcformat: 'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s' }, formatter: 'date' },
                { label: "操作类型", name: "OperateTypeName", index: "OperateType", width: 100, fixed: true, align: "center" },
                { label: "操作表名", name: "OperateTable", width: 150 }
            ],
            sortname: "CreateTime",
            height: height,
            sortorder: "desc",
            subGrid: true,
            subGridRowExpanded: function (subgridId, rowId) {
                var rowDatas = $grid.jqGrid('getRowData', rowId);
                if (typeof (rowDatas["DataLogId"]) != "undefined") {
                    UtilAjaxPost("/System/Log/GetDataLogById", { id: rowDatas["DataLogId"] },
                        function (val) {
                            $("#detailDiv").find('label').each(function () {
                                var $this = $(this), id = $this.attr('id');
                                (val[id]) && $this.text(val[id]);
                            });
                            //拼接Table
                            var table = '';
                            var operateData = eval('(' + val.OperateData + ')');
                            switch (val.OperateType) {
                                case 0://新增
                                case 2:
                                    if (typeof (operateData.length) === "number") {
                                        for (var key in operateData) {
                                            table += '<table class="complex-table" style="margin:4px 0px 4px 0px"><tbody><tr><th style="width:150px"> 字段名： </th><td>值</td></tr>';
                                            for (var dataKey in operateData[key]) {
                                                table += ' <tr><th>' + dataKey + '：</th><td>' + operateData[key][dataKey] + '</td></tr>';
                                            }
                                            table += '</tbody></table>';
                                        }
                                    } else {
                                        table += '<table class="complex-table" style="margin-top:10px"><tbody><tr><th style="width:150px"> 字段名： </th><td>值</td></tr>';
                                        for (var key in operateData) {
                                            table += ' <tr><th>' + key + '：</th><td>' + operateData[key] + '</td></tr>';
                                        }
                                        table += '</tbody></table>';
                                    }
                                    break;
                                case 1:
                                    var operateAfterData = eval('(' + val.OperateAfterData + ')');

                                    if (typeof (operateData.length) === "number") {
                                        for (var key in operateData) {
                                            table += '<table class="complex-table" style="margin-top:10px"><tbody><tr><th style="width:150px"> 字段名： </th><td>修改前</td><td>修改后</td></tr>';
                                            for (var dataKey in operateData[key]) {
                                                table += ' <tr><th>' + dataKey + '：</th><td>' + ((operateData[key][dataKey] != operateAfterData[key][dataKey]) ? '<lable style="color:blue">' + operateData[key][dataKey] + '</lable>' : operateData[key][dataKey]) + '</td><td>' + ((operateData[key][dataKey] != operateAfterData[key][dataKey]) ? '<lable style="color:red">' + operateAfterData[key][dataKey] + '</lable>' : operateAfterData[key][dataKey]) + '</td></tr>';
                                            }
                                            table += '</tbody></table>';
                                        }
                                    } else {
                                        table += '<table class="complex-table" style="margin-top:10px"><tbody><tr><th style="width:150px"> 字段名： </th><td>修改前</td><td>修改后</td></tr>';
                                        for (var key in operateData) {
                                            table += ' <tr><th>' + key + '：</th><td>' + ((operateData[key] != operateAfterData[key]) ? '<lable style="color:blue">' + operateData[key] + '</lable>' : operateData[key]) + '</td><td>' + ((operateData[key] != operateAfterData[key]) ? '<lable style="color:red">' + operateAfterData[key] + '</lable>' : operateAfterData[key]) + '</td></tr>';
                                        }
                                        table += '</tbody></table>';
                                    }
                                    break;
                                default:
                            }
                            $("#OperateData").html(table);
                        }
                    );
                } else {
                    $("#detailDiv label,#OperateData").html("");
                }
                $("#" + subgridId).html($("#detailDiv").html());
            }
        });
    }

    $(function () {
        height = UtilWindowHeightWidth().WinH - 319;
        initGird();
        $('#datepicker').datepicker({
            autoclose: true
        });
    });
</script>